<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://jsptags.com/tags/navigation/pager" prefix="pg"%>
<%
	String path=request.getContextPath();
	String basePath=request.getScheme()+"://"
			+request.getServerName()+":"+request.getServerPort()
			+path+"/";
%>
<!DOCTYPE html>
<html>
<base href="<%=basePath%>">
<head>
	<title>论坛-${community.getCommunityId() }.${community.getItemTitle() }</title>
	<meta charset="utf-8">
	<link rel="icon" href="img/logo.png" sizes="32x32">
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="css/problem.css">
	<link rel="stylesheet" type="text/css" href="css/animate.min.css">
	<link rel="stylesheet" type="text/css" href="css/syalert.min.css">
	<link rel="stylesheet" type="text/css" href="font-awesome/css/font-awesome.css">
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/popper.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.js"></script>
	<script type="text/javascript" src="js/syalert.min.js"></script>
	<script src="layui/layui.js"></script>
	<style type="text/css">
		.img-circle{
			border-radius: 50%;
		}
		.article a{
			text-decoration: none;
			color: #0B4793;
		    overflow: hidden;
		    text-overflow: ellipsis;
		    white-space: nowrap;
		    font-size: 22px;
		}
		.article a:hover{
			color: #d70000;
		}
		.summary {
		    color: #888;
		    font-size: 14px;
		    line-height: 180%;
		    padding: 0 0 5px 5px;
		}
		.file-comment {
		    width: 100%;
		    padding: .78571429em 1em;
		    border: 1px solid rgba(34,36,38,.15);
		    resize: vertical;
		    color: rgba(0,0,0,.87);
		    box-shadow: 0 0 0 0 transparent inset;
		    transition: color .1s ease,border-color .1s ease;
		    font-size: 1em;
		    line-height: 1.2857;
		    border-radius: 4px;
		    white-space: pre-wrap;
		    overflow-wrap: break-word;
		}
		.comment-title {
		    color: #999999;
		    font-size: 13px;
		}
		.dropdown-menu .link-myspace:hover{
			color:black;
		}
	</style>
</head>
<body style="background:url('img/ba.png');background-size: auto;background-color: rgba(0,0,0,0.1);">
	<!-- 顶部导航 -->
	<div class="nav fixed-top">
		<div class="container">
			<div class="top-title"><span>OnlineJudge</span></div>
			<div class="top-list">
				<ul>
					<li class=""><a href="problem/list?pager.offset=0">题库</a></li>
					<li class=""><a href="solution/list?pager.offset=0">题解</a></li>
					<li class="active1"><a href="community/list?pager.offset=0">论坛</a></li>
				</ul>
			</div>
			<div class="top-last">
				<c:if test="${currentUser!=null }">
					<a href="user/myspace" class="dropdown-toggle" data-toggle="dropdown">
	                    <img class="img-circle" src="${pageContext.request.contextPath }/img/${currentUser.getUserImg() }" style="margin: -5px;" width="35px">
	                    &nbsp;
	                    <strong id="id_user_username">${currentUser.getUserName() }</strong>
	                    <b class="caret"></b>
                	</a>
                	<ul class="dropdown-menu" style="width:50px;margin-top:16px;font-size: 13px;text-align: center">
                		<li style="padding: 0;"><hr style="margin:0;"><a class="link-myspace" href="user/myspace" style="font-size:14px;">个人中心</a></li>
                		<li style="padding: 0;"><hr style="margin:0;"><a class="btn btn-outline-primary btn-lg btn-block" role="button" href="user/logout" style="font-size:14px;">退出登录</a></li>
                    </ul>
				</c:if>
				<!-- 
				<c:if test="${currentUser==null }">
					<a href="javascript:void(0);" onclick="syalert.syopen('alert1')">登录/注册</a>
				</c:if>
				 -->
			</div>
		</div>
	</div>

	<!-- 内容 -->
	<div class="container" style="margin-top: 70px;">
		<div class="panel panel-default">
			<div class="panel-body">
				<input type="hidden" name="communityId123" id="communityId" value="${community.getCommunityId() }">
				<input type="hidden" name="itemCount" id="itemCount" value="${community.getItemCount() }">
				<h2 style="margin-top: 10px;">
					${community.getItemTitle() }&nbsp;&nbsp;
				</h2>
				<div style="color: #999999; font-size:14px;">
				    作者：
				    <a href="user/otherspace?userId=${community.getUserId() }">
				        <img class="img-circle" src="${pageContext.request.contextPath }/img/${community.getUserImg() }" alt="作者的头像" style="width:29px;height:29px;">
				        &nbsp;
				        <span style="font-size: 18px;">${community.getUserName() }</span>
				    </a>
				    &nbsp;
				    ${community.getItemDate() }
				    &nbsp;
				    阅读&nbsp;<span id="itemViewCount">${community.getItemCount() }</span>
				</div>
				<hr>
				<p style="font-size: 16px;font-weight: 400;">
					${community.getItemContent() }
				</p>
			</div>
		</div>
		<!-- 评论区 -->
		<div class="panel panel-default">
			<div class="panel-body">
				<h3 style="font-weight: normal; margin: 10px 0 30px 0;font-size: 24px;">评论(<span>${commentCount }</span>)</h3>
				<div class="row">
				    <div class="col-md-1 col-sm-2 col-xs-3">
			            <a href="user/otherspace?userId=${currentUser.getUserId() }">
			                <img class="img-circle" src="${pageContext.request.contextPath }/img/${currentUser.getUserImg() }" width="45px" alt="我的头像">
			            </a>
				    </div>
			        <div class="col-md-11 col-sm-10 col-xs-9" style="padding-left: 0px;">
			            <form id="comment_replyForm" class="comment_reply_form" role="form" method="post" action="community/addComment">
			                <input type="hidden" name="communityId" value="${community.getCommunityId() }">
					        <input type="hidden" name="userId" value="${currentUser.getUserId() }">
			                <textarea class="file-comment" name="commentContent" id="content" cols="40" rows="2" maxlength="10000" required="" title="回复" placeholder="在这里写评论..." style="font-size: 14px;"></textarea>
		                    <button type="submit" id="submitComment" class="btn btn-outline-primary float-right" style="font-size: 14px;">提交评论</button>
			            </form>
			            <script type="text/javascript">
							layui.use('layer', function() {
								var layer = layui.layer;
								var $ = layui.jquery;
								//表单验证
								$("#comment_replyForm").submit(function() {
									if($("#content").val()==""){
										layer.msg('评论内容不能为空', { icon: 2, time: 1000, shade: [0.6, '#000', true] });
										return false;
									}
									return true;
								});
							});
						</script>
			        </div>
				</div>
				<!-- 评论 -->
				<div>
					<c:forEach var="comment" items="${commentList }">
					<div>
						<hr style="margin: 10px 0 10px 0;">
						<div class="row">
							<div class="col-md-1 col-sm-2 col-xs-3" style="max-width: 60px;">
					            <a href="user/otherspace?userId=${comment.getUserId() }">
					                <img class="img-circle" src="${pageContext.request.contextPath }/img/${comment.getUserImg() }" alt="用户头像" width="45px">
					            </a>
					        </div>
					        <div class="col-md-11 col-sm-10 col-xs-9">
					            <div>
					                <a href="user/otherspace?userId=${comment.getUserId() }" style="font-size: 15px;">${comment.getUserName() }</a>
					                &nbsp;
					                <span class="comment-title" title="2020-12-17 21:24:00">${comment.getCommentDate() }</span> 
					                &nbsp;&nbsp;&nbsp;     
				                    <a href="javascript:void(0);" id="reply_${comment.getCommentId() }" class="comment-title hand-cursor">回复</a>
					            </div>
					            <div id="">
					                <p>${comment.getCommentContent() }</p>
					            </div>
				                <form id="replyForm_${comment.getCommentId() }" class="comment_reply_form" role="form" method="post" action="community/addReply" style="display: none;">
					              	<input type="hidden" name="communityId" value="${community.getCommunityId() }">
					                <input type="hidden" name="userId" value="${currentUser.getUserId() }">
					                <input type="hidden" name="commentId" value="${comment.getCommentId() }">
					                <input type="hidden" name="replyUserId" value="${comment.getUserId() }">
					                <textarea class="file-comment" name="replyContent" id="content_${comment.getCommentId() }" cols="40" rows="2" maxlength="10000" required="" title="回复" placeholder="在这里写评论..." style="font-size: 14px;"></textarea>
				                    <button type="submit" id="submitComment" class="btn btn-outline-primary float-right" style="font-size: 14px;">提交评论</button>
					            </form>
				                <script>
				                    $(document).ready(function () {
				                        $("#reply_${comment.getCommentId() }").click(function () {
				                            $(this).text(function(i, text){
				                                  return text === "回复" ? "收起" : "回复";
				                              });
				                            $("#replyForm_${comment.getCommentId() }").toggle(500);
				                        });
				                    });
				                </script>
				                <script type="text/javascript">
									layui.use('layer', function() {
										var layer = layui.layer;
										var $ = layui.jquery;
										//表单验证
										$("#replyForm_${comment.getCommentId() }").submit(function() {
											if($("#content_${comment.getCommentId() }").val()==""){
												layer.msg('评论内容不能为空', { icon: 2, time: 1000, shade: [0.6, '#000', true] });
												return false;
											}
											return true;
										});
									});
								</script>
					        </div>
						</div>
					</div>
					<c:forEach var="reply" items="${comment.getReplyList() }">
					<!-- 回复区 -->
					<div style="padding-left: 50px;">
						<div class="row">
							<div class="col-md-1 col-sm-2 col-xs-3" style="max-width: 60px;">
						           <a href="user/otherspace?userId=${reply.getUserId() }">
						               <img class="img-circle" src="${pageContext.request.contextPath }/img/${reply.getUserImg() }" alt="用户头像" width="45px">
						           </a>
						    </div>
						    <div class="col-md-11 col-sm-10 col-xs-9">
						          <div>
						              <a href="user/otherspace?userId=${reply.getUserId() }" style="font-size: 15px;">${reply.getUserName() }</a>
						              &nbsp;
						              <span style="font-size:13px;color:#999;">回复</span>
						              &nbsp;
						              <a href="user/otherspace?userId=${reply.getReplyUserId() }" style="font-size: 15px;">${reply.getReplyUserName() }</a>
						              &nbsp;
						              <span class="comment-title" title="2020-12-17 21:24:00">${reply.getReplyDate() }</span> 
						              &nbsp;&nbsp;&nbsp;     
					                  <a href="javascript:void(0);" id="reply_${comment.getCommentId() }_${reply.getReplyId() }" class="comment-title hand-cursor">回复</a>
						          </div>
						          <div id="">
						              <p>${reply.getReplyContent() }</p>
						          </div>
					              <form id="replyForm_${comment.getCommentId() }_${reply.getReplyId() }" class="comment_reply_form" role="form" method="post" action="community/addReply" style="display: none;">
						              <input type="hidden" name="communityId" value="${community.getCommunityId() }">
					                  <input type="hidden" name="userId" value="${currentUser.getUserId() }">
					                  <input type="hidden" name="commentId" value="${comment.getCommentId() }">
					                  <input type="hidden" name="replyUserId" value="${reply.getUserId() }">
						              <textarea class="file-comment" name="replyContent" id="content_${comment.getCommentId() }_${reply.getReplyId() }" cols="40" rows="2" maxlength="10000" required="" title="回复" placeholder="在这里写评论..." style="font-size: 14px;"></textarea>
					                  <button type="submit" id="submitComment" class="btn btn-outline-primary float-right" style="font-size: 14px;">提交评论</button>
						          </form>
					              <script>
					                  $(document).ready(function () {
					                      $("#reply_${comment.getCommentId() }_${reply.getReplyId() }").click(function () {
					                          $(this).text(function(i, text){
					                                return text === "回复" ? "收起" : "回复";
					                            });
					                          $("#replyForm_${comment.getCommentId() }_${reply.getReplyId() }").toggle(500);
					                      });
					                   });
					              </script>
					              <script type="text/javascript">
									layui.use('layer', function() {
										var layer = layui.layer;
										var $ = layui.jquery;
										//表单验证
										$("#replyForm_${comment.getCommentId() }_${reply.getReplyId()}").submit(function() {
											if($("#content_${comment.getCommentId() }_${reply.getReplyId() }").val()==""){
												layer.msg('回复内容不能为空', { icon: 2, time: 1000, shade: [0.6, '#000', true] });
												return false;
											}
											return true;
										});
									});
								</script>
						      </div>
						</div>
					</div>
					</c:forEach>
					</c:forEach>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="js/login_register.js"></script>
	
	<script src="js/jquery.cookie.js"></script>
	<script type="text/javascript">
		//阅读量增加
		//console.log($.cookie('solutionViewId'));
	    function increaseViewCount() {
	        if($.cookie("communityViewId")!=parseInt($("#communityId").val())) {
	        	var data={communityId:parseInt($("#communityId").val()),itemCount:parseInt($("#itemCount").val())};
	            $.ajax({
	            	type:"POST",
	            	dataType:"json",
		            contentType: "application/json;charset=UTF-8",
	                async: false,
	                url:"community/updateViewCount",
	                data: JSON.stringify(data),
	                success:function (data) {
	                	$("#itemViewCount").html(data.itemCount);
	                    $.cookie("communityViewId",
	                    	parseInt($("#communityId").val()),//需要cookie写入的业务
	                        {
	                            "path":"/", //cookie的默认属性
	                        }
	                    );
	                },
	                error:function(){
	                	console.log("error");
	                    //alert("获取数据出错!");
	                },
	            });
	        }
	    }
	    increaseViewCount();
	  </script>
</body>
</html>